<template>
	<view>
		<view class="content">
			<view>
				<button size="mini" type="primary" @click="pagechange('first')" :disabled="pbutdisable"
					style="margin-right: 30rpx;">首页</button>
				<button size="mini" type="primary" @click="pagechange(-1)" :disabled="pbutdisable">上一页</button>
			</view>
			<view style="width: 200rpx;"><uni-easyinput type="number" v-model="currentpage" @change="pagechange(0)"></uni-easyinput>
			</view>
			<view>/{{pages}}</view>
			<view>
				<button size="mini" type="primary" @click="pagechange(+1)" :disabled="nbutdisable"
					style="margin-right: 30rpx;">下一页</button>
				<button size="mini" type="primary" @click="pagechange('end')" :disabled="nbutdisable">末页</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "pages_button",
		props: {
			pages: {},
			total: {},
			pagesize: {},
		},
		data() {
			return {
				currentpage: 1,
				pbutdisable: true,
				nbutdisable: false
			};
		},
		mounted() {
			if (this.total > 0 && this.pagesize > 0) {
				this.pages = Math.ceil(this.total / this.pagesize)
				this.$forceUpdate()
			}
		},
		watch: {
			currentpage(v) {
				if (v <= 1) {
					this.pbutdisable = true
				} else {
					this.pbutdisable = false
				}
				if (v >= this.pages) {
					this.nbutdisable = true
				} else {
					this.nbutdisable = false
				}
				this.$emit('currentpage', v)
			},
			pages(v) {
				this.currentpage = 1
				if (v <= this.currentpage) {
					this.nbutdisable = true
				} else {
					this.nbutdisable = false
				}
			}
		},
		methods: {
			pagechange(v) {
				if (v == 1 || v == -1) {
					this.currentpage = this.currentpage + v
				} else if (v == 'end') {
					this.currentpage = this.pages
				} else if (v == 'first') {
					this.currentpage = 1
				}
			}
		}
	}
</script>

<style>
	.content {
		/* background-color: red; */
		background-color: white;
		width: 100%;
		max-width: 1200rpx;
		height: auto;
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: absolute;
		bottom: 10rpx;
	}
</style>